<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="查询时间">
       <el-date-picker
             v-model="queryParams.date"
             type="datetime"
             default-time="12:00:00"
             placeholder="选择日期时间">
           </el-date-picker>
            <span style="color: red;font-size: 15px;">(只支持获取一个小时内的数据比如2023-10-25 16:00)则获取16-17点的数据</span>
      </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">下载聊天记录文件</el-button>
      </el-form-item>
      <div>
        <el-form-item label="聊天文件" prop="multipartFile">
          <!--
            本地上传地址：http://localhost:8880/api/v1/system/fileUploadUrl
            服务器上传地址：https://zx.hydjxapp.com/api/v1/system/fileUploadUrl
           -->
         <el-upload  class="avatar-uploader" :action="'https://zx.hydjxapp.com/api/v1/system/fileUploadUrl'" name="multipartFile" :on-success="getFileChange" :show-file-list="false">
         <el-button type="primary" icon="el-icon-plus" size="mini">上传聊天文件</el-button>
         </el-upload>
        </el-form-item>
      </div>
    </el-form>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column label="发送者昵称" align="center" prop="fromName" />
      <el-table-column label="发送者头像" align="center" prop="fromHeadPic">
        <template slot-scope="scope">
          <el-image style="width: 30%; height: 30%" :src="scope.row.fromHeadPic"
            :preview-src-list="[scope.row.fromHeadPic]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="接受者昵称" align="center" prop="toName" />
      <el-table-column label="接受者头像" align="center" prop="toHeadPic">
        <template slot-scope="scope">
          <el-image style="width: 30%; height: 30%" :src="scope.row.toHeadPic"
            :preview-src-list="[scope.row.toHeadPic]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="消息内容" align="center" prop="content">
        <template slot-scope="scope">
          <div v-if="scope.row.msgType == 'img'">
            <el-image style="width: 20%; height: 20%" :src="scope.row.content"
              :preview-src-list="[scope.row.content]">
            </el-image>
          </div>
          <div v-if="scope.row.msgType == 'txt'">{{scope.row.content}}</div>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="time" />
      <el-table-column label="消息类型" align="center" prop="msgType" >
          <template slot-scope="scope">
            <div v-if="scope.row.msgType == 'txt'">文字</div>
            <div v-if="scope.row.msgType == 'img'">图片</div>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, updateUserAmount,getDownloadUrl } from "@/api/user/user";


/**
 * 填充不满两位数的数字为0开头
 * @param {String,Number} number 传入的数值
 * @return {String} 返回字符串
 */
 const toDigit = (any) => {
	return any.toString().replace(/^(\d)$/, `0$1`);
};

/**
 * 传入13位时间戳或者具体日期返回指定格式日期
 * @param {String,Number} date "1589257080657" "2020-07-13 18:00"
 * @param {String} format "Y-M-D Y-M-D-h-m-s"
 * @return {String} "2020-05-12 12:12:12"
 */
 const dateFormat = (date, format) => {
	format = format || `Y-M-D`;
	const cur = Number(date) ? new Date(Number(date)) : new Date(date);
	const year = cur.getFullYear();
	const month = toDigit(cur.getMonth() + 1);
	const day = toDigit(cur.getDate());
	const hour = toDigit(cur.getHours());
	const minute = toDigit(cur.getMinutes());
	const second = toDigit(cur.getSeconds());
	const week = cur.getDay();
	return format.replace(/Y|M|D|E|h|m|s/g, function(matches) {
		return ({
			Y: year,
			M: month,
			D: day,
			h: hour,
			m: minute,
			s: second,
			E: ['日', '一', '二', '三', '四', '五', '六'][week]
		})[matches];
	});
}

export default {
  name: "User",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 修改用户余额弹出层
      updTitle: "",
      updOpen: false,
      // 查询参数
      queryParams: {
        date:null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

      }
    };
  },
  created() {
    //this.getList();
  },
  methods: {

    getFileChange(e){
      if(e.code == 200){
        this.userList = e.data;
      }else{
        this.$modal.msgError(e.msg);
      }
    },

    /* 获取聊天记录下载地址 */
    getDownloadUrl(){
      this.loading = true;
      const date = dateFormat(this.queryParams.date || new Date(),'YMDh')
      getDownloadUrl(date).then(response =>{
        this.loading = false;
        if(response.code == 200){
           window.location.href = response.data;
        }
      }).catch(() => {this.loading = false;});
    },

    /** 查询用户列表 */
    getList() {
      // this.loading = true;
      // listUser(this.queryParams).then(response => {
      //   this.userList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.updOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nickName: null,
        totalAmount: null,
        incomeAmount: null,
        remark: null,
        phone: null,
        enabled: null,
        headPic: null,
        baseInfoComplete: null,
        vip: null,
        vipLevel: null,
        age: null,
        sex: null,
        idCard: null,
        name: null,
        avatarAttachmentId: null,
        birthday: null,
        constellation: null,
        height: null,
        bodyWeight: null,
        registerTime: null,
        updateTime: null,
        realPersonAuth: null,
        loginTime: null,
        loginStatus: 0,
        loginPointX: null,
        loginPointY: null,
        loginCityCode: null,
        loginCityName: null,
        loginOutTime: null,
        clientVersion: null,
        userType: null,
        macAddress: null,
        deviceName: null,
        logoutType: null,
        logoutContent: null,
        isOfficial: null,
        voice: null,
        video: null,
        education: null,
        secrecy: null,
        topCard: null,
        giftCount: null,
        amount: null,
        topTime: null,
        topEnd: null,
        hideView: null,
        serverTime: null,
        interest: null,
        notice: null,
        orderMsg: null,
        shortMsg: null,
        alipayUserId: null,
        isPlan: null,
        planTime: null,
        userTag: null,
        onlineNotice: null,
        isStealth: null,
        isGift: null,
        lable: null,
        professional: null,
        chatCount: null,
        inviteCount: null,
        unlockWechat: null,
        goWay: null,
        exposureTime: null,
        updatePhone: null,
        isDisplay: null,
        backBirthday: null,
        inteCode: null,
        inteName: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
      // this.getList();
      this.getDownloadUrl();
    }
  }
};
</script>
